<template>
    <div>
        <el-row>
            <el-card>
                <el-row>
                    <el-col :span="6.5">
                        <div>
                            <img src="src/assets/zut.png" />
                        </div>
                    </el-col>
                    <el-col :span="8" style="text-align:left;">
                        <div
                                style="font-family: myFirstFont;font-weight:bold;font-size: 250%"
                        >
                            区域id：{{ this.area.id }}<br />
                            区域名称：{{ this.area.name }}<br />
                            权限：{{ this.area.role }}<br />
                            估计人数：{{ this.area.number }}<br />
                            起始时间点：{{ this.area.beginTime }}<br />
                            结束时间点：{{ this.area.endTime }}<br />
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
        <el-row>
            <el-card>
                <div style="margin-top: 15px;" id="app">
                    <el-table
                            v-loading="loading"
                            :data="tableData"
                            @selection-change="handleSelectionChange"
                            style="width: 100%"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column
                                prop="person_name"
                                label="人员名称"
                                sortable
                                width="100"
                        ></el-table-column>
                        <el-table-column
                                prop="area_name"
                                label="区域名称"
                                sortable
                                width="150"
                        ></el-table-column>
                        <el-table-column
                                prop="status"
                                label="通行状态"
                                sortable
                                width="200"
                        >
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 'A'">正常</p>
                                <p v-if="scope.row.status == 'B'">非正常时间进出</p>
                                <p v-if="scope.row.status == 'C'">越权进出</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="direction" label="进出" sortable width="100">
                            <template slot-scope="scope">
                                <p v-if="scope.row.direction == 'A'">进入</p>
                                <p v-if="scope.row.direction == 'B'">离开</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="recordDate"
                                label="通行时间"
                                sortable
                                width="200"
                        ></el-table-column>
                        <el-table-column align="right" width="130">
                            <template slot="header">
                                <el-button
                                        type="primary"
                                        @click="exportExcel()"
                                        size="mini"
                                        plain
                                >导出所选中信息</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            style="margin: 15px 0px;"
                            prev-text="上一页"
                            next-text="下一页"
                            background
                            layout="prev, pager, next, sizes, jumper, total"
                            :page-sizes="[5, 10, 20, 40, 100, 500, 50000]"
                            :page-size="pageSize"
                            :total="total"
                            :current-page="pageNow"
                            @current-change="findPage"
                            @size-change="findSize"
                    >
                    </el-pagination>
                </div>
            </el-card>
        </el-row>

    </div>
</template>

<script>
    import echarts from "echarts";
    import XLSX from "xlsx";
    import getPerson from "@/plugins/getPerson.js";
    import format from "../../plugins/format";
    var list = [];

    export function validateAccountNumber(str) {
        const reg = /^([1-9]{1})$/;
        return reg.test(str);
    }

    export default {
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error("格式错误"));
                } else {
                    callback();
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error("请输入0-100的整数"));
                } else {
                    callback();
                }
            };
            const _this = this;
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                picker.$emit("pick", new Date());
                            },
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit("pick", date);
                            },
                        },
                        {
                            text: "一周前",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", date);
                            },
                        },
                    ],
                },
                save: false,
                delete_button: 1,
                update_button: 1,
                fileList: [],
                jsonData: null,
                jsonStr: "",
                setExcel: false,
                getExcel: false,
                loading: false,
                total: 0, //总页数，从后台查询
                pageNow: 1, //当前页数，默认为1
                pageSize: 5, //当前页显示的数据条数，默认为5
                input4: null,
                select: "请选择",
                tableData: null,
                multipleSelection: [],
                area: {
                    id: this.$route.query.id,
                    name: "",
                    role: "",
                    number: "",
                    beginTime: "",
                    endTime: "",
                },
            };
        },
        created() {
            const _this = this;
            _this.$http.area.findOne(_this.area.id).then(function(resp) {
                if (resp.code == 2000) {
                    _this.area = resp.data;
                }
            });
            _this.findAllTableDataByPage();
        },

        methods: {
            exportExcel() {
                //创建book
                var wb = XLSX.utils.book_new();
                //json转sheet
                var ws = XLSX.utils.json_to_sheet(this.multipleSelection, {});
                //设置列宽
                ws["!cols"] = [{ width: 15 }, { width: 15 }, { width: 30 }];
                var timestamp = new Date().getTime();
                //sheet写入book
                XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
                //输出
                XLSX.writeFile(wb, "file_" + timestamp + ".xlsx");
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                //console.log(val)
            },
            findPage(page) {
                // console.log('当前页数：' + page)
                this.pageNow = page;
                this.findAllTableDataByPage();
            },
            findSize(size) {
                // console.log('当前页面记录条数：' + size)
                this.pageSize = size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage() {
                const _this = this;
                let pageRequest = {
                    pageNow: this.pageNow,
                    pageSize: this.pageSize,
                    a_id: this.$route.query.id,
                };
                this.$http.record.findByPageByA_id(pageRequest).then((res) => {
                    this.tableData = res.data;
                    this.total = res.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].area_name = res.data[i].area.name;
                        this.tableData[i].person_name = res.data[i].person.name;
                    }
                });
            },

                },
    };
</script>

<style scoped></style>
